<template>
  <div
    v-if="hasParams && !isPreview"
    :class="`advanced-linkage-toolbar for_${componentStyle}`"
  >
    <i
      v-show="!paramsVisible"
      ref="rooter"
      class="rooter vs_icon_dev vs_icon_dev_shaixuan"
      :title="$demoi18n('advanced-linkage-toolbar.tip')"
      @click="showParams()"
    ></i>
    <div v-show="paramsVisible" ref="paramsBox" class="linkageDatas">
      <table
        v-for="(params, index) in evParams"
        :key="index"
      >
        <tr
          v-for="(param, i) in params"
          :key="i"
          class="param"
        >
          <td class="parameterKey">{{ param.evtParameterKey }}:</td>
          <td class="parameterVal">{{ param.evtParameterVal }}</td>
          <td>
            <el-button
              class="del_btn"
              :link="true"
              type="primary"
              icon="Delete"
              size="default"
              :title="$demoi18n('advanced-linkage-toolbar.delTip')"
              @click="delAdvancedLinkageParam(param)"
            ></el-button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';

export default {
  components: {},
  props: {
    wid: String, // 组件id
    config: Object, // 组件配置
  },
  emits: ['paramsChange'],
  data() {
    return {
      paramsVisible: false,
      isPreview: window.xVueWeb.app.config.globalProperties.$xvueIsRunAsUserModel,
    };
  },
  computed: {
    ...mapState({
      linkageDatas: state => state.VisualComponentsModule.advancedLinkage.linkageDatas,
    }),
    linkageDatas_() {
      const arr = this.linkageDatas.filter(n => n.wid === this.wid && !n.hasLink && !n.oldHasLink);
      return arr;
    },
    evParams() {
      const evts = {};
      this.linkageDatas_.forEach(n => {
        n.events.forEach(ev => {
          const { evtKey } = ev;
          const arr = [];
          ev.params.forEach(p => {
            arr.push({
              evtKey,
              wid: n.wid,
              ...p,
            });
          });
          evts[evtKey] = arr;
        });
      });
      return evts;
    },
    componentStyle() {
      return this.config.config.property.componentStyle;
    },
    hasParams() {
      let hasParams = false;
      for (let i = 0; i < this.linkageDatas_.length; i++) {
        const n = this.linkageDatas_[i];
        for (let i1 = 0; i1 < n.events.length; i1++) {
          const { params } = n.events[i1];
          if (params.length > 0) {
            hasParams = true;
            break;
          }
        }
        if (hasParams) {
          break;
        }
      }
      return hasParams;
    },
  },
  watch: {
    'evParams'(newP, oldP) {
      if (JSON.stringify(newP) !== JSON.stringify(oldP)) {
        this.$emit('paramsChange', this.evParams);
      }
    },
    paramsVisible(val) {
      if (val) {
        document.addEventListener('click', this.bindBlurClick);
      } else {
        document.removeEventListener('click', this.bindBlurClick);
      }
    },
  },
  methods: {
    ...mapMutations(['delAdvancedLinkageParam']),
    showParams() {
      this.paramsVisible = true;
    },
    bindBlurClick(e) {
      if (e.target === this.$refs.rooter) {
        return;
      }
      if (!this.hasParams) {
        this.paramsVisible = false;
        return;
      }
      const isParamsBox = this.$refs.paramsBox.contains(e.target);
      if (!isParamsBox) {
        this.paramsVisible = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.advanced-linkage-toolbar {
  right: 0;
  top: 0;
  position: absolute;
  z-index: 1001;
  display: flex;
  justify-content: flex-end;
  .rooter {
    font-size: 11px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .linkageDatas {
    min-width: 200px;
    display: flex;
    font-size: 12px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    table {
      border-collapse: collapse;
      td {
        padding: 1px 5px;
        .del_btn {
          padding: 0;
        }
        &.parameterKey {
          text-align: right;
        }
        &.parameterVal {
          text-align: left;
        }
      }
    }
  }
  &.for_light {
    color: #8fc118;
    table {
      background-color: #eee;
      td {
        color: #409eff;
      }
    }
    table:hover {
      background-color: #ddd;
    }
  }
  &.for_dark {
    color: #8fc118;
    table {
      background-color: #064559;
    }
    table:hover {
      background-color: #177897;
    }
  }
}
</style>
